<template>
    <up-popup
        :show="modelValue"
        @close="emit('update:modelValue', false)"
        :closeable="true"
        round="30rpx"
        :z-index="900"
    >
        <view class="pl-30 pr-30 pb-40">
            <view class="ft-32 bold t-3 pt-26 center mb-20">请选择取消原因</view>
            <view class="ft-32">
                <view
                    v-for="item in cancelReasonOptions"
                    :key="item.value"
                    class="align-center pt-16 pb-16"
                    @click="cancelReasonValue = item.value"
                >
                    <hj-image
                        :isLoad="false"
                        :src="cancelReasonValue === item.value ? 'radio-02.png' : 'radio-01.png'"
                        height="36rpx"
                        width="36rpx"
                        mode="aspectFit"
                    />
                    <view class="flex-auto pl-16">{{ item.label }}</view>
                </view>
            </view>
            <view class="mt-30"></view>
            <up-button
                type="primary"
                :loading="butLoading"
                loadingText="提交中"
                @click="cancelOrder"
                shape="circle"
                class="but"
            >
                <view class="center ft-32 but t-w">{{ cancelSubmitText || '提交' }}</view>
            </up-button>
            <!-- 底部安全区域 -->
            <hj-safe-footer />
        </view>
    </up-popup>
</template>

<script setup>
/**
 * @description 取消原因选择弹窗
 * @author yinzhi
 * @date 2025-05
 */
import { ref, defineComponent, watch } from 'vue'
defineComponent({
    name: 'CancelPopup'
})
const props = defineProps({
    modelValue: {
        type: Boolean,
        default: false
    },
    order: {
        type: Object,
        default: () => {}
    },
    cancelSubmitText: {
        type: String,
        default: '提交'
    }
})
// 选中的取消原因
const cancelReasonValue = ref(1)
const butLoading = ref(false)

watch(
    () => props.modelValue,
    val => {
        if (val) {
            butLoading.value = false
        }
    }
)

// 取消原因选项
const cancelReasonOptions = ref([
    {
        label: '出行计划有变',
        value: 1
    },
    {
        label: '订错/多订',
        value: 2
    },
    {
        label: '交通延误/取消，无法出行',
        value: 3
    },
    {
        label: '与店家协商一致',
        value: 4
    },
    {
        label: '酒店环境差/设施差',
        value: 5
    },
    {
        label: '酒店没房',
        value: 6
    },
    {
        label: '其他渠道更优惠',
        value: 7
    },
    {
        label: '其他',
        value: 8
    }
])

const emit = defineEmits(['update:modelValue', 'cancelSubmit'])

// 确认取消
const cancelOrder = () => {
    butLoading.value = true
    const text = cancelReasonOptions.value.find(
        item => item.value === cancelReasonValue.value
    ).label
    emit('cancelSubmit', {
        order: props.order || {},
        cancelReason: text
    })
    let time = setTimeout(() => {
        emit('update:modelValue', false)
        clearTimeout(time)
    }, 200)
}
</script>

<style scoped lang="scss">
.but {
    height: 88rpx !important;
    background: $uni-color-primary;
}
</style>
